<template>
	<view class="container">
		<view class="header"><image src="/static/img/update.png" mode=""></image></view>
		<!-- 合伙人权益 -->
		<view class="section" style="margin-top: -50upx;">
			<view class="top">
				<view class="title u-f-ajc"><view>合伙人权益</view></view>
				<view class="sub-title">开通合伙人权益，即享平台分红奖励</view>
			</view>
			<view class="content u-f-jsb" v-for="item in shopList" :key="item.id">
				<view class="left">
					<image :src="item.logo" mode=""></image>
					<!-- <view class="name u-line-clamp">{{item.title}}</view> -->
				</view>
				<view class="right u-f1 u-f-jsb u-f-column">
					<view class="price">{{item.price_market}}</view>
					<view class="bag">{{item.title}}</view>
					<view class="btn" @click="open(item.id)">开通权益</view>
				</view>
			</view>
		</view>
		<!-- 市级代理权益 -->
		<!-- <view class="section">
			<view class="top">
				<view class="title u-f-ajc"><view>市级代理权益</view></view>
				<view class="sub-title">开通代理权益，即享市级服务津贴</view>
			</view>
			<view class="content u-f-jsb">
				<view class="left">
					<image src="/static/img/up_good.png" mode=""></image>
					<view class="name u-line-clamp">袋鼠妈妈 孕妇护肤品天然纯保湿补水专用化妆品水乳套装</view>
				</view>
				<view class="right u-f1 u-f-jsb u-f-column">
					<view class="price">10万</view>
					<view class="bag">合伙人大礼包</view>
					<view class="btn">联系客服</view>
				</view>
			</view>
		</view> -->

		<!-- #ifndef APP-PLUS -->
		<tabbar :current-page="2"></tabbar>
		<!-- #endif -->
	</view>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			shopList:[]
		};
	},
	onLoad: function() {
		this.getUpgradeGoods();
	},
	methods: {
		open(id){
			uni.navigateTo({
				url:`/pages/category/commodity?id=${id}`
			})
		},
		getUpgradeGoods() {
			var self = this;
			self.$http.post(service.api.upgrade.getUpgradeGoods, {}).then(function(res) {
				var list = res.data.data;
				self.shopList = list;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 150rpx;
	// background-color: $uni-color-base;
	background-color: #f81149;
	.header {
		image {
			width: 750rpx;
			height: 575rpx;
		}
	}

	.section {
		background-color: #f81149;

		.top {
			.title {
				position: relative;
				width: 100%;
				height: 70rpx;

				view {
					position: relative;
					font-size: 36rpx;
					color: #fffdd5;
					// text-shadow:0px 2px 6px rgba(212,28,21,1);

					&:before,
					&:after {
						position: absolute;
						top: 30rpx;
						content: '';
						display: block;
						width: 200rpx;
						height: 6rpx;
						border-radius: 3rpx;
					}

					&:before {
						left: -215rpx;
						background: linear-gradient(right, #fffdd5, rgba(0, 0, 0, 0));
					}

					&:after {
						right: -215rpx;
						background: linear-gradient(left, #fffdd5, rgba(0, 0, 0, 0));
					}
				}
			}

			.sub-title {
				text-align: center;
				font-size: 24rpx;
				color: rgba(255, 253, 195, 1);
			}
		}

		.content {
			box-sizing: border-box;
			width: 710rpx;
			height: 400rpx;
			background-color: $uni-text-color-inverse;
			padding: 20rpx;
			margin: 40rpx auto;
			border-radius: 20rpx;

			.left {
				width: 350rpx;

				image {
					width: 315rpx;
					height: 315rpx;
				}

				.name {
					font-size: 24rpx;
					color: $uni-text-color;
					font-weight: bold;
				}
			}

			.right {
				.price {
					font-size: 66rpx;
					font-weight: bold;
					color: #f81149;
				}
				.bag {
					font-size: 32rpx;
					font-weight: bold;
					color: $uni-text-color;
				}
				.btn {
					width: 230rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 38rpx;
					margin-top: 60rpx;
					color: $uni-text-color-inverse;
					// background:linear-gradient(-90deg,rgba(253,60,46,1),rgba(254,98,87,1));
					background: #f81149;
				}
			}
		}
	}
}
</style>
